<script lang="ts" setup>
import {onMounted, ref} from "vue";

const greetingMessage = ref('');

function updateGreeting() {
  const hour = new Date().getHours();
  if (hour < 12) {
    greetingMessage.value = '早上好啊~';
  } else if (hour < 18) {
    greetingMessage.value = '下午好啊~';
  } else {
    greetingMessage.value = '晚上好啊~';
  }
}

onMounted(() => {
  updateGreeting();
})

</script>

<template>
  <v-app-bar :elevation="9" rounded>
    <v-row align="center" no-gutters>

      <!-- 猫咪图片与标题的列 -->
      <v-col class="d-flex align-center" cols="auto">
        <img alt="Cat" src="@/assets/cats_walk.jpg" style="max-height: 60px; max-width: 100%; margin-right: 8px;">
        <v-toolbar-title>小动物图鉴</v-toolbar-title>
      </v-col>

      <v-spacer></v-spacer>

      <!-- 动态问候语的列 -->
      <v-col cols="auto">
        <v-container class="pa-0">
          <v-banner-text class="pl-5">{{ greetingMessage }}用户jwj1342</v-banner-text>
        </v-container>
      </v-col>

    </v-row>
  </v-app-bar>
</template>

